<template>
  <div id="water-page" class="page-container">
    <div id="header">
      <div class="return">
        <router-link to="home">
          <img src="@/assets/返回.png" alt="">
        </router-link>
      </div>
    </div>
    <div id="body">
      <div id="left-container">
        <div class="charts-div">
          <div class="title"></div>
          <div class="tools-bar">
            <span class="item item-1" :class="{
              active: currentItem == 'item-1'
            }" @click.stop="selectItem('item-1')"> 降雨强度 </span>
            <span class=" item item-2" :class="{
              active: currentItem == 'item-2'
            }" @click.stop="selectItem('item-2')">累计降雨量</span>
          </div>
          <div class="chart">
            <component is="WaterLineChart" v-if="currentItem == 'item-1'" title="" x-name="min" y-name="mm/min" />
            <component is="RainTotalLineChart" v-if="currentItem == 'item-2'" title="" x-name="min" y-name="L/(s·hm²)" />
            <text class="desc">历史重现期</text>
          </div>
        </div>
        <div class="compute-div" style="position: relative;">
          <div class="year">
            <div class="left">
              <span>降雨重现期</span>
            </div>
            <div class="right">
              <input class="input" type="text" v-model="year" placeholder="5">
              <span class="text">年一遇</span>
            </div>
          </div>
          <div class="time" style="position: relative;">
            <div class="left">
              <span>降雨时间</span>
            </div>
            <div class="right">
              <input class="input" type="text" v-model="time" placeholder="120">
              <span class="text">分钟</span>

            </div>
          </div>
          <div class="btn" @click.stop="startTest">
            <span class="text">开始模拟</span>
          </div>
        </div>
      </div>
      <div id="right-container">
        <div class="setting" @click="showTableList"></div>
        <div class="map-container">
          <div class="area area-jx" data-name="江夏区" data-value="jx" @click="handleAreaClick($event)"></div>
        </div>
        <div class="desc-1">
          <span>武汉市分成汉口、汉阳和武昌三镇，属亚热带湿润季风气候，雨量充沛、日照充足，四季分明。总体气候环境良好，近30年来，年均降雨量1269毫米，且多集中在6-8月。</span>
        </div>
      </div>
    </div>
    <table-list v-show="isShowTable" @closeTable="isShowTable = false"></table-list>
  </div>
</template>


<script lang="ts">
import { computed, defineComponent, onMounted, provide, watch, ref } from "vue";
import { useRouter } from 'vue-router'
import WaterLineChart from "../../components/chart/WaterLineChart.vue";
import RainTotalLineChart from "../../components/chart/RainTotalLineChart.vue";
import TableList from './table-list.vue'


export default defineComponent({
  emits: ['closePage'],
  name: "WaterPage",
  components: {
    WaterLineChart,
    RainTotalLineChart,
    TableList
  },
  setup(props, ctx) {
    const router = useRouter()
    let currentItem = ref('item-1');
    let isShowTable = ref(false);
    let year = ref('')
    let time = ref('')
    function selectItem(itemName: any) {
      if (itemName == currentItem.value) {
        return
      }
      currentItem.value = itemName

    }
    function handleAreaClick(e: any) {
      console.log(e)
    }
    function showTableList() {
      isShowTable.value = true
    }
    function startTest() {
      // 保存year数据，用于显示警情级别
      localStorage.setItem('yearValue', year.value)
        // 通知ue变化
        ; (window as any).ue4('rainData', { year: year.value, time: time.value, history: false })
      ctx.emit('closePage')
      // router.push({ path: '/rains' })
    }
    return {
      year,
      time,
      currentItem,
      isShowTable,
      selectItem,
      handleAreaClick,
      showTableList,
      startTest
    }
  }
})
</script>

<style scoped>
#water-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url('~@/assets/water_page_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#header {
  width: 100%;
  height: 7.5vh;
  margin-top: 1vh;
  overflow: hidden;
  background-image: url('~@/assets/water_page_head1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#body {
  display: flex;
  padding: 0 2.8vw;
  height: calc(100% - 10vh);
}

#left-container {
  flex-shrink: 0;
  height: 100%;
  width: 35vw;
}

#left-container .charts-div {
  position: relative;
  width: 100%;
  height: 46vh;
  background-image: url('~@/assets/water_chart_bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: left top;
  padding: 3vh;
  margin-top: 2vh;
  padding-right: 2.5vh;
}

#left-container .charts-div .title {
  position: absolute;
  width: 13vh;
  height: 2vh;
  top: 1.5vh;
  left: 5vw;
  background-image: url('~@/assets/武汉雨型模型.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top left;
}

#left-container .tools-bar {
  position: absolute;
  top: 4vh;
  right: 4vh;
  color: #fff;
}

#left-container .tools-bar .item {
  margin: 0 1vh;
  cursor: pointer;
  padding: 5px;
  display: inline-block;
  font-size: 1vw;
}

#left-container .tools-bar .item.active {
  background-image: url('~@/assets/item-active.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#left-container .chart {
  margin-top: 5vh;
  height: calc(100% - 4vh);
  text-align: center;
}

#left-container .chart .desc {
  letter-spacing: 1px;
  color: #dedede;
  font-size: 1vh;
  position: relative;
  top: -5%;
}

#left-container .compute-div {
  margin-top: 6vh;
  height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#left-container .compute-div .year {
  width: 100%;
  height: 6vh;
  background-image: url('~@/assets/input-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  padding: 1vh 3vh;
}


#left-container .compute-div .year .left {
  flex-shrink: 0;
  display: flex;
  font-size: 2.3vh;
  font-family: PingFang SC;
  font-weight: 500;
  color: #2A596C;
  background: linear-gradient(0deg, #32F4DB 0%, #0BA6C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  align-items: center;
  padding-right: 3vh;
  border-right: 1px solid #214C5D;
  ;
}

#left-container .compute-div .year .right {
  flex: 1;
  margin-left: 2vh;
  width: calc(100% - 30vh);
  display: flex;
  justify-content: space-between;
}

#left-container .compute-div .year .right .input {
  width: 50%;
  background-color: transparent;
  outline: none;
  border: none;
  color: #fff;
  font-size: 2.5vh;
}

#left-container .compute-div .year .right .input:focus {
  border: none;
  outline: none;
}

#left-container .compute-div .year .right .text {
  flex-shrink: 0;
  color: rgba(66, 213, 255, 0.7);
  font-size: 2.5vh;
}

#left-container .compute-div .time {
  width: 100%;
  height: 6vh;
  background-image: url('~@/assets/input-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  padding: 1vh 3vh;
}

#left-container .compute-div .time .left {
  flex-shrink: 0;
  display: flex;
  font-size: 2.3vh;
  font-family: PingFang SC;
  font-weight: 500;
  color: #2A596C;
  background: linear-gradient(0deg, #32F4DB 0%, #0BA6C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  align-items: center;
  padding-right: 5vh;
  border-right: 1px solid #214C5D;
  ;
}

#left-container .compute-div .time .right {
  flex: 1;
  margin-left: 2vh;
  width: calc(100% - 30vh);
  display: flex;
  justify-content: space-between;
}

#left-container .compute-div .time .right .input {
  width: 50%;
  background-color: transparent;
  outline: none;
  border: none;
  color: #fff;
  font-size: 2.5vh;
}

#left-container .compute-div .time .right .text {
  flex-shrink: 0;
  color: rgba(66, 213, 255, 0.7);
  font-size: 2.5vh;
}

#left-container .compute-div .time .right .input:focus {
  border: none;
  outline: none;
}

#left-container .compute-div .btn {
  width: 100%;
  height: 6vh;
  line-height: 6vh;

  background-image: url('~@/assets/submit-btn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  cursor: pointer;
}

#left-container .compute-div .btn:hover {
  transform: scale(1.05);
}

#left-container .compute-div .btn .text {
  font-size: 2vh;
  color: #fff;
}

#right-container {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: url('~@/assets/图层1.png');
  background-size: 90% 80%;
  background-repeat: no-repeat;
  background-position: left bottom;
}

#right-container .setting {
  position: absolute;
  top: 1rem;
  right: 0rem;
  width: 8rem;
  height: 8rem;
  background-image: url('~@/assets/设置.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

#right-container .setting:hover {
  background-size: 105% 105%;
}

#right-container .map-container {
  position: relative;
  width: 60%;
  margin: 0 auto;
  height: 90%;
  background-image: url('~@/assets/wh-map.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 1rem center;
}

#right-container .map-container .area {
  position: absolute;
}

#right-container .map-container .area.area-jx {
  width: 10%;
  height: 2.5vh;
  /* border: 1px solid red; */
  top: 70.1%;
  left: 41%
}

#right-container .desc-1 {
  position: absolute;
  top: 35vh;
  right: 5vh;
  width: 20vw;
  background-image: url('~@/assets/边框2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #f5f7f9;
  padding: 10px;
  font-size: 1vw;
  line-height: 1.5;
}

input {
  border: none;
  outline: none;
}

input:focus {
  border: none;
  outline: none;
}

input::-webkit-input-placeholder {
  /* WebKit browsers，webkit内核浏览器 */
  color: rgba(66, 213, 255, 0.27);
  ;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgba(66, 213, 255, 0.27);
  ;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgba(66, 213, 255, 0.27);
  ;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: rgba(66, 213, 255, 0.27);
  ;
}
</style>
